<template>
  <div ref="lineDemo" :id="props.id" class="myEcharts"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineExpose } from "vue";
//引入echarts
import * as echarts from "echarts";

//获取父组件数据
let props = defineProps(["id"]); //父组件传入的id

let myChart = ref(null);

//打开echer 等待
const ecLoading = () => {
  myChart.showLoading({
    text: "",
    color: "#000",
    maskColor: "rgba(255, 255, 255, 0)",
    showSpinner: true,
    spinnerRadius: 16,
    lineWidth: 3,
  });
};

const noData = () => {
  myChart.clear(); // 清除图表内容
  myChart.showLoading({
    text: "暂无数据",
    showSpinner: false, // 隐藏加载中的转圈动图
    textColor: "#000",
    maskColor: "rgba(255, 255, 255, 0)",
    fontSize: "25px",
    fontWeight: "bold",
    fontFamily: "Microsoft YaHei",
  });
};

// echarts标准格式
const echartInit = (myData) => {
  //文字大小适配
  function fontSize(res) {
    const clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920;
    return res * fontSize;
  }


  if(myData.length == 0){
noData()
return
  }

 let option = {
//   title: {
//     text: "今日&昨日",
//     left: "50%",
//     textAlign: "center",
//   },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "#ddd",
      },
    },
    backgroundColor: "rgba(255,255,255,1)",
    padding: [5, 10],
    textStyle: {
      color: "#7588E4",
    },
    extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
  },
   grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top: "5%",
      containLabel: true,
    },
//   legend: {
//     right: 20,
//     orient: "vertical",
//     data: ["今日"],
//   },
  xAxis: {
    type: "category",
    data: myData.map(item => item.day),
    boundaryGap: false,
    splitLine: {
      show: true,
      interval: "auto",
      lineStyle: {
        color: ["#D4DFF5"],
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "#609ee9",
      },
    },
    axisLabel: {
      margin: 10,
      textStyle: {
        fontSize: 14,
      },
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        color: ["#D4DFF5"],
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "#609ee9",
      },
    },
    axisLabel: {
      margin: 10,
      textStyle: {
        fontSize: 14,
      },
    },
  },
  series: [
    {
      name: "今日",
      type: "line",
      smooth: true,
      showSymbol: false,
      symbol: "circle",
      symbolSize: 6,
    data: myData.map(item => item.totalFee),
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(199, 237, 250,0.5)",
              },
              {
                offset: 1,
                color: "rgba(199, 237, 250,0.2)",
              },
            ],
            false
          ),
        },
      },
      itemStyle: {
        normal: {
          color: "#f7b851",
        },
      },
      lineStyle: {
        normal: {
          width: 3,
        },
      },
    },
 
  ],
};

  setTimeout(() => {
    // setOption前隐藏loading事件
    myChart.hideLoading();
    myChart.setOption(option);
  }, 1000);
};

defineExpose({
  echartInit,
  ecLoading,
  noData,
});

const lineDemo = ref(null); //获取dome
onMounted(() => {
  //获取DOM元素并初始化
  myChart = echarts.init(document.getElementById(props.id));

  const chartInstance = echarts.init(lineDemo.value);
  const handleResize = () => {
    chartInstance.resize();
  };
  window.addEventListener("resize", handleResize);
  // 在组件销毁时移除resize事件监听
  onUnmounted(() => {
    window.removeEventListener("resize", handleResize);
  });
});
</script>
<style lang="less" scoped>
.myEcharts {
  width: 100%;
  height: 100%;
}
</style>
